<template>
  <biz-form-remote-select
    :placeholder="placeholder"
    :remote-method="remoteMethod"
    :value="productId"
    cleared
    @input="selectProduct"
    @focus='focus'
  >
    <div class="service-template-option" slot="option" slot-scope="{ option }">
      <h3 class="option-list-name">{{ option.name }}</h3>
      <p class="service-template-option-content">
        <span class="service-template-option-content-text">
          <label>{{$t('common.base.serialNumber')}}：</label>
          <span>{{ option.serialNumber }}</span>
        </span>
        <span class="service-template-option-content-text">
          <label>{{$t('common.base.type')}}：</label>
          <span>{{ option.type }}</span>
        </span>
        <span class="service-template-option-content-text">
          <label>{{$t('common.base.customer')}}：</label>
          <span v-if="option.customer">{{ option.customer.name || '' }}</span>
          <span v-else class="unbind-name">{{$t('common.base.notContact')}}</span>
        </span>
        <span class="service-template-option-content-text">
          <label>{{$t('customer.customerNo')}}：</label>
          <span v-if="option.serialNumber">{{ option.customer.serialNumber || '' }}</span>
        </span>
      </p>
    </div>
  </biz-form-remote-select>
</template>

<script>
import * as ProductApi from '@src/api/ProductApi';
import i18n from '@src/locales';

export default {
  name:'qrcode-select-product',
  data(){
    return{
      productList:[],
      productId:[],
      params:{
        keyword:'',
        pageNum:0,
        pageSize:10,
        qrcodeState:this.qrcodeState
      }
    }
  },
  props: {
    placeholder: {
      type: String,
      default: i18n.t('product.tips.selectProductTip')
    },
    value: {
      type: Array,
      default: () => []
    },
    qrcodeState:{
      type:Number,
      default:0   // 0 - 未关联，1 - 已关联
    },
    selectedProduct:{
      type:Array,
      default:()=>[]
    }
  },
  mounted(){
    this.productId=this.selectedProduct
  },
  methods:{
    clear(){
      this.productId=[];
    },
    focus(){
      this.params.pageNum=0;
      this.params.keyword='';
    },
    remoteMethod(params){
      const {keyword}=params;
      if(keyword){
        this.params.pageNum=1;
        this.params.keyword=keyword;
      }else{
        this.params.pageNum++;
      }
      return ProductApi.getProductV2(this.params).then(res=>{
        const {result}=res;
        if (!res || !result) return;
          const list = result.content.map((product) =>
            Object.freeze({
              label: product.name,
              value: product.id,
              ...product,
            })
          );
          res.hasNextPage=result.totalPages>result.number;
          res.total=result.totalElements;
          if(Array.isArray(res.list)){
            res.list=res.list.concat(list);
          }else{
            res.list=list;
          }
          return res;
      });
    },
    selectProduct(val){
      this.params.pageNum=0;
      this.productId=val;
      this.$emit('input',val);
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .biz-form-remote-select-clear{
  top:2px;
}
.service-template-option{
  padding: 5px 0;
  min-height: 58px;
  h4{
    height: 26px;
    line-height: 26px;
  }
}
.service-template-option-content {
  &-text {
    display: flex;
    width: 35%;

    label {
      padding-top: 0;
      word-break: keep-all;
    }

    span {
      line-height: 24px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .unbind-name{
      color: #bfbfbf;
    }

  }
}
</style>

<style lang="scss">
  .list-wrapper {
    .option-list {
      font-size: 12px;
      .option-name {
        font-size: 14px;
        font-weight: bold;
        color: #606266;
      }
      li {
        &:hover {
          background-color: #f5f7fa;
        }
      }
      li.selected {
        background: #fff;
        .service-template-option-content>* {
          font-weight: bold;
          color: #666;
        }
        .option-list-name {
          color: $color-primary-light-6;
        }
        &:hover {
          background-color: $select-draggable-color;
        }
      }
    }
  }
</style>